<template>
  <div class="page">
    <h2>患者用药记录</h2>

    <div class="controls">
      <el-input v-model="q" placeholder="按患者姓名/ID/药品搜索" clearable style="flex:1" @clear="onClear" />
      <el-date-picker v-model="range" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" style="width:320px" />
      <div style="display:flex;gap:8px">
        <el-button @click="exportCSV">导出CSV</el-button>
      </div>
    </div>

    <div class="muted">说明：记录示例基于常见用药登记项。实际系统应与处方、用药核对与空瓶回收模块联动，实现可追溯流程。</div>

    <el-table :data="filtered" stripe border style="width:100%;margin-top:12px">
      <el-table-column prop="recordId" label="记录ID" width="110" />
      <el-table-column prop="patientId" label="患者ID" width="110" />
      <el-table-column prop="patientName" label="患者姓名" width="140" />
      <el-table-column prop="drug" label="药品/剂量" />
      <el-table-column prop="route" label="给药途径" width="120" />
      <el-table-column prop="frequency" label="频次" width="100" />
      <el-table-column prop="administeredBy" label="执行人" width="140" />
      <el-table-column prop="date" label="用药时间" width="180" />
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button size="small" @click="view(row.recordId)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top:8px;display:flex;gap:8px;align-items:center">
      <div style="flex:1"></div>
      <div class="muted">共 {{ filtered.length }} 条记录</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

const q = ref('');
const range = ref([]);
const data = ref([]);

const DEFAULT = [
  { recordId:'P-2001', patientId:'PT-001', patientName:'张三', drug:'劳拉西泮片 0.5mg', route:'口服', frequency:'每天 1 次', administeredBy:'护士 李丽', date:'2025-10-20 09:00', note:'门诊给药' },
  { recordId:'P-2002', patientId:'PT-002', patientName:'李四', drug:'氟哌啶醇注射液 5mg', route:'肌注', frequency:'按医嘱', administeredBy:'护士 王强', date:'2025-10-21 14:30', note:'住院给药' },
  { recordId:'P-2003', patientId:'PT-001', patientName:'张三', drug:'奥氮平片 10mg', route:'口服', frequency:'每天 1 次', administeredBy:'护士 李丽', date:'2025-10-22 08:10', note:'早间服药' }
];

onMounted(()=>{ data.value = JSON.parse(JSON.stringify(DEFAULT)); });

const filtered = computed(()=>{
  const qq = q.value.trim().toLowerCase();
  return data.value.filter(r=>{
    if(qq && !(r.patientName.toLowerCase().includes(qq) || r.patientId.toLowerCase().includes(qq) || r.drug.toLowerCase().includes(qq))) return false;
    if(range.value && range.value.length===2){ const start = new Date(range.value[0]); const end = new Date(range.value[1]); const dt = new Date(r.date); if(dt < start || dt > end) return false; }
    return true;
  });
});

function view(id){ const it = data.value.find(x=>x.recordId===id); if(it) ElMessage.info(JSON.stringify(it)); }
function exportCSV(){ const rows = [['recordId','patientId','patientName','drug','route','frequency','administeredBy','date','note'], ...data.value.map(r=>[r.recordId,r.patientId,r.patientName,r.drug,r.route,r.frequency,r.administeredBy,r.date,r.note])]; const txt = rows.map(r=>r.map(c=>`"${String(c).replace(/"/g,'""')}"`).join(',')).join('\n'); const blob = new Blob([txt],{type:'text/csv'}); const url = URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url; a.download='patient_medication_records.csv'; a.click(); URL.revokeObjectURL(url); }
function onClear(){}
</script>

<style scoped>
.page{font-family: Arial, "Microsoft YaHei", sans-serif; margin:10px;}
h2{margin-top:-10px}
.controls{display:flex;gap:8px;margin-bottom:12px;align-items:center}
.muted{color:#666;font-size:13px}
</style>